<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>歌单页面</title>
		<script src="../../js/vue.js"></script>
		<script src="../../js/element.js"></script>
		<script src="../../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/element.css" />
		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/sheet/sheet.css" />
	</head>
	<body>
		<div id="app">
			<!-- 头部专辑信息 -->
			<div class="header">
				<!-- 专辑图片 -->
				<span class="img">
					<img :src="sheet.img">
				</span>
				<span class="sheetInfo">
					<!-- 专辑名称 -->
					<div class="sheetName">
						<h1>{{sheet.name}}</h1>
						<span class="edit" v-if="sheet.isEdit==1">
							<span @click="updateSheet"><i class="iconfont icon-bianji">编辑</i></span>&nbsp;&nbsp;
							<span @click="deleteSheet"><i class="iconfont icon-shanchu">删除</i></span>&nbsp;&nbsp;
							<!-- <span><i class="iconfont icon-wj-wjsc">投稿</i></span> -->
						</span>
					</div>
					<!-- 创建的用户名 -->
					<div class="user" v-for="user in sheet.userList">
						<span class="userImg"><img :src="user.img" alt=""></span>
						<span class="userName" @click="toSinger(user.id)">{{user.nickName}}</span>
						<!-- 如果这张歌单是登录用户创建的，可以添加标签 -->
						<span class="sheetTpye" v-if="(sheet.type==null||sheet.type=='')&&sheet.isEdit==1"
							@click="addTpye">
							添加标签
						</span>
						<!-- 如果这张歌单不是登录用户创建的，并且没有标签显示空 -->
						<span class="sheetTpye" v-else-if="(sheet.type==null||sheet.type=='')&&sheet.isEdit==0">
							暂无
						</span>
						<!-- 如果这张歌单不是登录用户创建的，并且有标签 -->
						<span class="sheetTpye" v-else>
							<span v-for="tag in sheet.tagList">#{{tag}}&nbsp;&nbsp;</span>
						</span>
					</div>
					<!-- 介绍 -->
					<div class="remarks">
						<span v-if="sheet.remarks==null||sheet.remarks==''">
							<span>精心完善歌单信息有机会获得推荐，让更多用户看到你的大作</span>
						</span>
						<span v-else>
							<span>{{sheet.remarks}}</span>
						</span>
					</div>
					<!-- 歌单相关操作 -->
					<div class="sheetButtons">
						<!-- 播放全部 -->
						<span class="button" @click="listPlayButton()">
							<i class="songListPlay iconfont icon-24gl-play"></i>
							播放全部
						</span>
						<!-- 收藏 -->
						<span class="button">
							<!-- 爱心 -->
							<span>
								<i v-if="sheet.isLove===0" class="iconfont icon-aixin"
									@click="changeLove(1, sheet.id)"></i>
								<i v-else class="iconfont icon-aixin_shixin" style="color: #FC6C62;"
									@click="changeLove(0, sheet.id)"></i>
							</span>
							收藏
						</span>
						<!-- 其他 -->
						<span class="otherButton">
							<i class="iconfont icon-gengduo"></i>
						</span>
					</div>
				</span>
			</div>
			<div class="main">
				<div class="main-header">
					<span class="nav1" @click="navChange(1)">歌曲</span>
					<span class="nav2" @click="navChange(2)">评论({{sheet.commentCount}})</span>
					<span id="hr"></span>
				</div>
				<div class="iframDiv">
					<iframe id="albumIframe" :src="navUrl" frameborder="0">

					</iframe>
				</div>
			</div>

			<!-- 编辑歌单 -->
			<el-dialog id="el-dialog" title="编辑歌单" :visible.sync="updateFormVisible" width="55%">
				<el-form class="addform" ref="addForm" label-position="right" label-width="70px"
					size="mini">
					<el-form-item label="歌单名">
						<el-input v-model="updateFrom.name" placeholder="请输入歌单名" style="width:200px">
						</el-input>
					</el-form-item>
					<el-form-item label="图片">
						<el-upload ref="uploadImage" class="upload-demo"
							action="http://localhost:8160/sheet/uploadAddImg" :on-change="handleChangeAddImg"
						    :headers="headers" :on-success="uploadUpdateImgSuccess" :file-list="fileImgList" list-type="picture"
							:before-upload="beforeUploadAddImg" :show-file-list="showImgFileList">
							<el-button size="small" type="primary">选择文件</el-button>
							<div slot="tip" class="el-upload__tip">只能上传 image 文件，且不超过30MB</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="标签">
						<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
							@close="handleClose(tag)">
							{{tag}}
						</el-tag>
						<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
							@keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
						</el-input>
						<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
					</el-form-item>
					<el-form-item label="介绍">
						<el-input type="textarea" v-model="updateFrom.remarks" name="remarks"
							placeholder="请输入介绍" rows=3 style="width:300px">
						</el-input>
					</el-form-item>
				</el-form>
				<div slot="footer">
					<el-button @click="updateFormTagVisible = false" size="mini">取 消</el-button>
					<el-button type="primary" @click="updateSubmit" size="mini">提 交</el-button>
				</div>
			</el-dialog>

			<!-- 添加歌单标签 -->
			<el-dialog id="el-dialog" title="添加歌单标签" :visible.sync="addFormTagVisible" width="55%">
				<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
					@close="handleClose(tag)">
					{{tag}}
				</el-tag>
				<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
					@keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
				</el-input>
				<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
				<div slot="footer">
					<el-button @click="addFormTagVisible = false" size="mini">取 消</el-button>
					<el-button type="primary" @click="addSubmit" size="mini">提 交</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					url: '', //本页面的 url
					sheet: '', //专辑信息
					// 菜单
					navUrl: 'song.html', //菜单指向的地址
					currentIndex: -1,
					addFormTagVisible: false, //添加歌单标签
					addFrom: '',
					dynamicTags: [],
					inputVisible: false,
					inputValue: '',
					updateFormVisible: false, //修改表单开关  
					updateFrom: '',
					headers: {
						"token": this.getCookie('yxy-pre:user_token')
					},
					// 上传歌曲图片 文件列表
					fileImgList: [{
						name: '',
						url: ''
					}],
					showImgFileList: false
				}
			},
			mounted() { // 生命周期函数
				this.getSheetById()
				window.getChildrenSongCurrentIndex = this.getChildrenSongCurrentIndex
				window.listPlayButton = this.listPlayButton
				window.getIndexCurrentIndex = this.getIndexCurrentIndex
				window.toSinger = this.toSinger
				window.toAlbum = this.toAlbum
				window.getSheetById = this.getSheetById
			},
			methods: {
				getChildrenSongCurrentIndex(currentIndex) {
					this.currentIndex = currentIndex
				},
				// 菜单选中为其添加样式
				navChange(navId) {
					console.log(navId)
					// 1、先去掉选择中的样式
					const navsDocument = document.querySelectorAll('.main-header span')
					for (var i = 0; i < navsDocument.length; i++) {
						navsDocument[i].style.color = '#000000'
					}
					this.navUrl = ''
					var sheetId = this.getUrlSheetId()

					const hrDocument = document.querySelector('#hr')
					// 2、判断用户选中的是哪一个，加上样式
					if (navId == 1) {
						const nav1Document = document.querySelector('.nav1')
						nav1Document.style.color = '#FC6C62'
						hrDocument.style.left = '20px'
						this.navUrl = 'song.html?' + sheetId
					} else if (navId == 2) {
						const nav1Document = document.querySelector('.nav2')
						nav1Document.style.color = '#FC6C62'
						hrDocument.style.left = '165px'
						this.navUrl = 'comment.html?' + sheetId
					}
				},
				// 获取当前页面的 url 中的 sheetId
				getUrlSheetId() {
					// 1、获取当前页面的 url
					var url = window.location.href
					this.url = url
					console.log(url)
					// 2、字符串截取 获取 sheetId
					var sheetId = url.slice(url.indexOf('=') + 1)
					console.log('歌单id', sheetId)
					// 3、返回 sheetId
					return '' + sheetId
				},
				// 根据 sheetId 查找歌单信息
				getSheetById() {
					// 1、获取 albumId
					// console.log(this.getUrlAlbumId())
					var sheetId = this.getUrlSheetId()
					axios({
						method: 'get',
						url: 'http://localhost:8160/sheet/getOneById/' + sheetId,
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.sheet = res.data.data.sheet
							// this.dynamicTags = res.data.data.sheet.tagList
							for(var i=0; i<res.data.data.sheet.tagList;i++){
								this.dynamicTags[i] = res.data.data.sheet.tagList[i]
							}
							this.updateFrom = res.data.data.sheet
							// 将数据发送给子页面
							// 这里需要暴露给全局，这样的话，子页面才能调用相对应的方法
							window.toChildData = this.sheet
						} else { //登陆失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 播放全部
				listPlayButton(currentIndex) {
					console.log('album歌曲下标' + currentIndex)
					this.getSheetById()
					// console.log(this.album.songList)
					// 1、将专辑的歌曲列表数据通过父页面方法传给父页面
					// 获取正在播放歌曲的下标，-1 表示还没有播放
					window.parent.getChildrenSongList(this.sheet.songList, currentIndex)
				},
				// 获取父页面正在播放的下标
				getIndexCurrentIndex(currentIndex) {
					// 调用子页面方法将，正在播放歌曲下标传给子页面
					var iframeDocument = document.getElementById("albumIframe")
					iframeDocument.contentWindow.getAlbumCurrentIndex(currentIndex)
				},
				// 通过值获取cookie
				getCookie(key) {
					// 如果浏览器中有多个cookie，会以 ；分隔 例如：a=a1;b=b1
					// 根据 ；将 cookie 字符串分割成数组 
					var cookieArr = document.cookie.split("; ");
					// 遍历数组
					for (var i = 0; i < cookieArr.length; i++) {
						// 再根据 = 分隔数组中的每一个元素，数组第一个就是key，第二个就是value
						var cookiePair = cookieArr[i].split("=");
						if (key == cookiePair[0]) {
							return decodeURIComponent(cookiePair[1]);
						}
					}
					return null;
				},
				// 跳转到歌手页面
				toSinger(id) {
					console.log(id)
					const fatherHtml = window.parent.document.querySelector("#indexIframe")
					fatherHtml.setAttribute('src', 'singer/singer.html?singerId=' + id)
				},
				// 跳转到歌手页面
				toAlbum(id) {
					console.log(id)
					const fatherHtml = window.parent.document.querySelector("#indexIframe")
					fatherHtml.setAttribute('src', 'album/album.html?albumId=' + id)
				},
				// 是否我喜欢
				changeLove(flag, id) {
					axios({
						method: 'get',
						url: 'http://localhost:8160/user/changeLove/3/' + flag + '/' + id,
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.getSheetById()
						} else {
							this.$message.error(res.data.message)
						}
					})
				},
				// 为专辑添加标签
				addTpye() {
					this.addFormTagVisible = true;
				},
				handleClose(tag) {
					this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
				},
				showInput() {
					this.inputVisible = true;
					this.$nextTick(_ => {
						this.$refs.saveTagInput.$refs.input.focus();
					});
				},
				handleInputConfirm() {
					let inputValue = this.inputValue;
					console.log(inputValue)
					if (inputValue) {
						this.dynamicTags.push(inputValue);
					}
					this.inputVisible = false;
					this.inputValue = '';
				},
				// 添加歌单标签
				addSubmit() {
					if (this.dynamicTags.length <= 0) {
						this.$message.warning('未添加标签')
					} else if (this.dynamicTags.length > 3) {
						this.$message.warning('可添加的标签不能超过 3 个')
					} else {
						var id = this.getUrlSheetId()
						axios({
							method: 'put',
							url: 'http://localhost:8160/sheet/addType/' + id,
							headers: {
								'token': this.getCookie('yxy-pre:user_token')
							},
							data: {
								'tagList': this.dynamicTags,
							}
						}).then(res => {
							//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
							if (res.data != undefined && res.data.code == 200) {
								console.log(res.data)
								this.getSheetById()
								this.addFormTagVisible = false;
							} else {
								this.$message.error(res.data.message)
							}
						})
					}
				},
				// 修改表单
				updateSheet() {
					this.updateFormVisible = true
				},
				// 修改表单
				updateSubmit(){
					let sheetImgUrl = localStorage.getItem('sheetUpdateImgUrl') 
            		this.fileImgList.length === 0 ? null:sheetImgUrl
					if (this.dynamicTags.length <= 0) {
						this.$message.warning('未添加标签')
					} else if (this.dynamicTags.length > 3) {
						this.$message.warning('可添加的标签不能超过 3 个')
					} else {
						console.log(this.dynamicTags)
						// 将数组转字符串
						var tagStr = this.dynamicTags[0] + ','
						for(var i=1; i<this.dynamicTags.length; i++){
							 tagStr = tagStr + this.dynamicTags[i] + ','
						}
						 console.log(tagStr)
						axios({
							method: 'put',
							url: 'http://localhost:8160/sheet/updateSheet',
							headers: {
								'token': this.getCookie('yxy-pre:user_token')
							},
							data: {
								'id' : this.updateFrom.id, 
								'name': this.updateFrom.name,
								'remarks': this.updateFrom.remarks,
								'img': sheetImgUrl,
								'status': 0,
								'type': tagStr
							}
						}).then(res => {
							if (res.data != undefined && res.data.code == 200) {
								console.log(res.data)
								// 刷新列表数据，重新求情列表数据
								this.getSheetById()
								this.$message.success(res.data.message)
								this.updateFormVisible = false
							} else { //失败
								this.$message.error(res.data.message)
							}
							// 清除本地存储
							localStorage.removeItem('sheetUpdateImgUrl')
						})
					}
				},
				// 添加图片文件 改变时会调用
				handleChangeAddImg(file, fileList) {
					// 显示文件列表
					this.showImgFileList = true
					if (fileList.length > 0) {
						this.fileImgList = [fileList[fileList.length - 1]] // 显示最后一次选择的文件
					}
				},
				// 文件上传前调用 判断文件大小、类型
				beforeUploadAddImg(file) {
					// file.type image/jpeg image/png 
					// 对 file.type.slice(0, 5) image 进行截取，判断是否是图片
					const isImage = file.type.slice(0, 5) === 'image';
					const isLt30M = file.size / 1024 / 1024 < 30;
					if (!isImage) {
						this.$message.error('上传的文件不是图片!');
					}
					if (!isLt30M) {
						this.$message.error('上传头像图片大小不能超过 30MB!');
					}
					return isImage && isLt30M;
				},
				uploadUpdateImgSuccess(response, file, fileList) {
					console.log(response)
					if (response.code == 200) {
						this.$message.success(response.message);
						// 获取文件访问地址
						let sheetUpdateImgUrl = response.data.sheetImgUrl
                		// 将文件访问地址保存到 本地会话空间
                		localStorage.setItem('sheetUpdateImgUrl', sheetUpdateImgUrl)
					} else {
						this.$message.error(response.message);
					}
					//刷新列表数据，重新求情列表数据
					this.getSheetById()
				},
				// 删除歌单
				deleteSheet(){
					var sheetId = this.getUrlSheetId()
					axios({
						method: 'delete',
						url: 'http://localhost:8160/sheet/deleteSheet/' + sheetId,
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						},
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.toMySong()
						} else {
							this.$message.error(res.data.message)
						}
					})
				},
				// 跳转到我的音乐页面
				toMySong(){
					const topHtml =  window.top.document.querySelector("#indexIframe")
					topHtml.setAttribute('src', 'menus/mySong/mySong.html')
				},
				
			},
		})
	</script>
</html>